<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>统一地图平台API</title>
    <meta name="keywords" content="统一地图平台api">
    <meta name="description" content="统一地图平台api">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link href="./../script/api.css" rel="stylesheet">
</head>

<body class="restdemo-page">
    <div class="page_wrapper">
        <div data-tpl="" class="content-sidebar has_right">
            <div class="content">
                <div class="crumbs">
                    您现在的位置：
                    <a>开发</a>
                    &gt;
                    <a>地图JS API</a>
                    &gt;
                    <a>绘制</a></div>
                <article>
                    <h1 class="title">
                        Geojson绘制
                        <span class="update-time">最后更新时间: 2020年04月30日</span>
                    </h1>
                    <div>
                        <div class="md-container">
                            <p>Geojson绘制用于通过Geojson格式的数据，实现在地图上绘制出点、线、面的基础绘制功能。</p>
                            <p>第一步、导入资源文件</p>
                            <div class="md-demo-code-wrapper">
                                <div class="md-demo-code-header"><a class="active">JavaScript</a></div>
                                <div class="md-demo-code-content">
                                    <div class="md-demo-code-content-item active">
                                        <pre><code class="html hljs xml">
    // 引入统一地图平台服务脚本
    &lt;script src="./js_example/script/map/map.min.js"&gt;&lt;/script&gt;
                                        </code></pre>
                                    </div>
                                </div>
                            </div>
                            <p>第二步、初始化地图</p>
                            <div class="md-demo-code-wrapper">
                                <div class="md-demo-code-header"><a class="active">JavaScript</a></div>
                                <div class="md-demo-code-content">
                                    <div class="md-demo-code-content-item active">
                                        <pre><code class="js hljs javascript">
         var amap = null;
            map.Factory.create('mapui', {
                // mapbox样式
                style: 'mapbox://styles/mapbox/outdoors-v10',
                center: [110.32343, 19.99401],
                zoom: 11,
                strategy: ['mapboxgl', 'openlayers', 'leaflet'],//配置地图引擎
                fullExtent: {
                xmin: 108.23365,
                ymin: 17.95253,
                xmax: 111.78395,
                ymax: 20.13104
                }
            }, (o) => {
                amap = o;
            });
                                        </code></pre>
                                    </div>
                                </div>
                            </div>
                            <h1>一、绘制点</h1>
                            <div class="md-demo-code-wrapper">
                                <div class="md-demo-code-header"><a class="active">JavaScript</a></div>
                                <div class="md-demo-code-content">
                                    <div class="md-demo-code-content-item active">
                                        <pre><code class="js hljs javascript">
        //1.定义一个点的Geojson数据对象
         var point = {
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [113.322646, 23.101359]
                    },
                    "properties": {
                        "title": "点2",
                    }
                }, {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [113.422646, 23.201359]
                    },
                    "properties": {
                        "title": "点1",
                    }
                }]
            }

            //2、将当前点数据作为地图的数据源  amap为上边地图初始化完成后返回的对象。
            amap.addSource("Point_GEOJSON", {
                "type": "geojson",
                "data": point
            });

            //3、添加图层、在地图上绘制点。
            let layer = amap.addLayer("pointLayer", "Point_GEOJSON", {
                'type': 'symbol',
                "layout": {
                    "text-field": "{title}",
                    "text-offset": [0, 0.6],
                    "text-anchor": "top"
                },
                "paint": {
                    "text-color": "#0000FF"
                }
            });
                                        </code></pre>
                                    </div>
                                </div>
                            </div>
                            <p>二、绘制线</p>
                            <div class="md-demo-code-wrapper">
                                <div class="md-demo-code-header"><a class="active">JavaScript</a></div>
                                <div class="md-demo-code-content">
                                    <div class="md-demo-code-content-item active">
                                        <pre><code class="js hljs javascript">
             //1.定义一个线的Geojson数据对象
            var line = {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [113.292646, 23.101359],
                        [113.4022646, 23.201359]
                    ]
                }
            }
            //2、将当前线数据作为地图的数据源 amap为上边地图初始化完成后返回的对象。
            amap.addSource("Line_GEOJSON", {
                "type": "geojson",
                "data": line
            });

            //3、添加图层、在地图上绘制线。
            let layer = amap.addLayer("pointLayer", "Line_GEOJSON", {
                'type': 'line',
                "layout": {
                    "line-join": "round",
                    "line-cap": "round"
                },
                "paint": {
                    "line-color": "#ff0000",
                    "line-width": 4
                }
            });
                                        </code></pre>
                                    </div>
                                </div>
                            </div>
                            <p>三、绘制面</p>
                            <div class="md-demo-code-wrapper">
                                <div class="md-demo-code-header"><a class="active">JavaScript</a></div>
                                <div class="md-demo-code-content">
                                    <div class="md-demo-code-content-item active">
                                        <pre><code class="js hljs javascript">
            //1.定义一个面的Geojson数据对象
            var Polygon = {
                'type': 'Feature',
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [
                        [
                            [113.222646, 23.201359],
                            [113.322646, 23.301359],
                            [113.422646, 23.501359],
                            [113.522646, 23.230359],
                            [113.222646, 23.201359]
                        ]
                    ]
                }
            }
            //2、将当前面数据作为地图的数据源 amap为上边地图初始化完成后返回的对象。
            amap.addSource("Polygon_GEOJSON", {
                "type": "geojson",
                "data": Polygon
            });

            //3、添加图层、在地图上绘制面。
            let layer = amap.addLayer("PolygonLayer", "Polygon_GEOJSON", {
                'type': 'fill',
                'paint': {
                    'fill-color': '#ff0000',
                    'fill-opacity': 0.8
                }
            });
                                        </code></pre>
                                    </div>
                                </div>
                            </div>

                            <p>四、更换Geojson数据源</p>
                            <div class="md-demo-code-wrapper">
                                <div class="md-demo-code-header"><a class="active">JavaScript</a></div>
                                <div class="md-demo-code-content">
                                    <div class="md-demo-code-content-item active">
                                        <pre><code class="js hljs javascript">
         //1.定义一个点的Geojson数据对象
         var point = {
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [113.322646, 23.101359]
                    },
                    "properties": {
                        "title": "点2",
                    }
                }, {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [113.422646, 23.201359]
                    },
                    "properties": {
                        "title": "点1",
                    }
                }]
            }

            //2、将当前点数据作为地图的数据源  amap为上边地图初始化完成后返回的对象。
            let source = amap.addSource("Point_GEOJSON", {
                "type": "geojson",
                "data": point
            });

            //3、添加图层、在地图上绘制点。
            let layer = amap.addLayer("pointLayer", "Point_GEOJSON", {
                'type': 'symbol',
                "layout": {
                    "text-field": "{title}",
                    "text-offset": [0, 0.6],
                    "text-anchor": "top"
                },
                "paint": {
                    "text-color": "#0000FF"
                }
            });

            //3秒后自动修改数据源
            setTimeout(() => {

                var updataPoint = {
                    "type": "FeatureCollection",
                    "features": [{
                        "type": "Feature",
                        "geometry": {
                            "type": "Point",
                            "coordinates": [113.492412, 23.154259]
                        },
                        "properties": {
                            "title": "点3",
                        }
                    }, {
                        "type": "Feature",
                        "geometry": {
                            "type": "Point",
                            "coordinates": [113.502646, 23.222359]
                        },
                        "properties": {
                            "title": "点4",
                        }
                    }]
                }
                //source为注册数据源返回的对象
                source.setData(updataPoint);//更改当前Source对象的的数据值
            }, 3000);
                                        </code></pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
</body>

</html>